<template>
  <view v-if="course_detail.course" class="play-container">
    <view class="cover_image">
      <video id="videoId" @play="onPlayVideo" :src="playingUrl"></video>
    </view>
    <view class="introduction">
      <view class="title-and-info">
        <text class="title">{{ course_detail.course.title }}</text>
        <view class="info">
          <text>{{ course_detail.course.study_count }}人学过</text>
          <text v-if="course_detail.course.level === 1">难度:初级</text>
          <text v-if="course_detail.course.level === 2">难度:中级</text>
          <text v-if="course_detail.course.level === 3">难度:高级</text>
          <text>时长:{{ course_detail.course.course_duration }}</text>
        </view>
      </view>
      <view class="comment">
        <image src="/static/images/evaluate@2x.png" />
      </view>
    </view>

    <view class="course-progress">
      <text class="title">学习进度</text>
      <view class="catelog-container">
        <view
          class="course-item"
          v-for="(item, index) in course_detail.videos"
          :key="item.id"
          @click="toggleSelect(index, item)"
        >
          <!-- 左边的序号和标题 -->
          <text :class="[selectedIndex == index ? 'active' : '']">
            {{ index + 1 }}{{ item.name }}
          </text>
          <!-- 右边的时长或是已完成  is_study是1的话，代表学习了，如果是0 代表没有学习 -->

          <text
            :class="[
              item.is_study === 1 ? 'studied' : 'time',
              selectedIndex === index ? 'active' : '',
            ]"
            >{{ item.is_study === 1 ? "已学习" : item.duration }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../utils/util";
export default {
  data() {
    return {
      course_id: null, //课程的id
      course_detail: "", //课程渲染类容
      playingUrl: "",
      selectedIndex: 0,
      isValidateRight: false,
    };
  },
  onLoad(opp) {
    console.log(opp.id);
    this.course_id = opp.id;

    this.getCoursePlayData();
  },
  methods: {
    async getCoursePlayData() {
      const res = await request({
        url: `course/play/${this.course_id}`,
      });
      console.log(res);
      this.course_detail = res.data.message;
      this.playingUrl = res.data.message.course.course_video_url;
    },
    // 点击切换
    async toggleSelect(index, item) {
      this.selectedIndex = index;

      // 做播放鉴权的判断，如果购买了，则继续执行下面代码，如果没有购买则 return
      const isCanPlay = await this.validatePlayRight();
      if (!isCanPlay) {
        // 给用户一个提示，说你还没有购买该课程，需要购买
        uni.showModal({
          title: "提示",
          content: "您还没有支付，请先支付后，再来观看哦~",
          confirmText: "去支付",
          confirmColor: "#ff8d43",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: `/pages/pay/index?id=${this.course_id}
                 &title=${this.course_detail.course.title}
                 &price=${this.course_detail.course.price}
                 &cover_image_url=${this.course_detail.course.cover_image_url}`,
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });

        return;
      }

      // 切换video的src
      this.playingUrl = item.video_url;
      // 这里加一个200毫秒的延时，我们是为了让刚刚切换的video的src属性，可以有一段缓冲时间
      setTimeout(() => {
        // 让video播放(这种方式更稳一些)
        uni.createVideoContext("videoId").play();
      }, 200);
      //判断是否已学习
      this.recordStudyProgress(item);
    },

    async recordStudyProgress(item) {
      // console.log(item);
      if (item.is_study == 1) return;
      const res = await request({
        url: "study/video",
        method: "POST",
        data: {
          course_id: this.course_id,
          video_id: item.id,
        },
      });
      console.log(res);
      if (res.data.status == 0) {
        item.is_study = 1;
      }
    },
    // Promise返回真和假

    async validatePlayRight() {
      /**
      return new Promise((resolve, reject) => {
        //...
        // resolve(true)
        // resolve(false)
      })
       */
      // return Promise.resolve(false)

      const res = await request({
        url: `order/paystatus`,
        data: {
          course_id: this.course_id,
        },
      });

      if (res.data.pay_status === 1) {
        this.isValidateRight = true;
        // 已经支付 // https://es6.ruanyifeng.com/#docs/promise#Promise-resolve
        return Promise.resolve(true);
      } else {
        // 未支付
        return Promise.resolve(false);
      }
    },
    //点击视频监听是否付费
    async onPlayVideo() {
      // if (!this.isValidateRight) {
        const isCanPlay = await this.validatePlayRight();
        if (!isCanPlay) {
          uni.createVideoContext("videoId").pause();
          // 给用户一个提示，说你还没有购买该课程，需要购买
          uni.showModal({
            title: "提示",
            content: "您还没有支付，请先支付后，再来观看哦~",
            confirmText: "去支付",
            confirmColor: "#ff8d43",
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({
                  url: `/pages/pay/index?id=${this.course_id}
                 &title=${this.course_detail.course.title}
                 &price=${this.course_detail.course.price}
                 &cover_image_url=${this.course_detail.course.cover_image_url}`,
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        // }
        // return
      }
    },
  },
};
</script>

<style lang="less" scoped>
.play-container {
  background-color: #efefef;
  position: relative;
  .cover_image {
    width: 750rpx;
    height: 434rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 750rpx;
      height: 434rpx;
    }
    video {
      width: 750rpx;
      height: 434rpx;
    }
  }
  .introduction {
    z-index: 3;
    position: absolute;
    margin-top: -10rpx;
    border-radius: 16px 16px 0px 0px;
    border-bottom: 1px solid #f5f5f5;
    left: 0;
    right: 0;
    height: 192rpx;
    background-color: #ffffff;
    padding: 38rpx 32rpx;
    display: flex;
    align-items: center;
    .title-and-info {
      flex: 1;
      .title {
        color: #343434;
        font-size: 24px;
        font-weight: bold;
      }
      .info {
        margin-top: 12rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #818181;
        font-size: 12px;
        display: block;
        text {
          padding-right: 15rpx;
        }
        text:nth-child(2),
        text:nth-child(3) {
          padding-left: 15rpx;
        }
        text:nth-child(2) {
          position: relative;
          &::before {
            position: absolute;
            content: "";
            background-color: #ebebeb;
            left: 0rpx;
            width: 1px;
            top: 8rpx;
            height: 20rpx;
          }
          &::after {
            position: absolute;
            content: "";
            background-color: #ebebeb;
            right: 0rpx;
            width: 1px;
            top: 8rpx;
            height: 20rpx;
          }
        }
      }
    }
    .comment {
      margin-top: 32rpx;
      image {
        width: 198rpx;
        height: 80rpx;
      }
    }
  }
  .course-progress {
    margin-top: 222rpx;
    padding: 44rpx 32rpx;
    background-color: #fff;
    .title {
      color: #343434;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 800;
    }
    .catelog-container {
      .course-item {
        display: flex;
        justify-content: space-between;
      }
      text {
        color: #636363;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
      .studied {
        float: right;
        margin-top: 16rpx;
        font-size: 10px;
        text-align: center;
        color: #aaaaaa;
        background-color: #f5f5f5;
        border-radius: 12rpx;
        width: 98rpx;
        height: 48rpx;
        line-height: 48rpx;
      }
      .time {
        float: right;
      }
      .active {
        color: #ff5e00;
      }
    }
  }
}
.comment-content {
  label {
    width: 100rpx;
  }
  textarea {
    width: 100%;
    height: 200rpx;
  }
}
</style>
